<template>
  <el-container style="height:1070px;background-color: #06134A">

    <!--抬头区域-->
    <el-header style="height: 10.5%" class="headerbackgroud">
      <div style="color: white;font-size: 30px;text-align: center;margin-top: 20px;margin-left: 70px">特种设备检测监测云平台</div>
      <el-card style="width:150px;height:50px;text-align:left;margin-left:80px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 6px;margin-top: -10px">
          大连特种设备工业有限公司
        </div>
      </el-card>
      <el-card style="width:127px;height:60px;align-items:right;margin-left:1600px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 2px;margin-top: -8px">
          {{dateFormat(date)}}
        </div>
      </el-card>
    </el-header>

    <!--中间区域-->
    <el-main style="height: 20%">
      <el-header style="height: 20%;border: 1px solid #3b7cbd; box-shadow: 0 2px 12px 0 #f6f6f6;margin-bottom: 5px;margin-top: -10px">
        <el-container style="margin-left:-20px;height: 100%;width: 100%">
          <el-form :inline="true" class="demo-form-inline" style="margin-top: 20px;margin-left: 10px">
            <el-form-item label="省份">
              <el-select v-model="formInline.region" placeholder="山东省" >
                <el-option label="山东省" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="地区">
              <el-select v-model="formInline.area" placeholder="青岛市">
                <el-option label="威海市" value="shanghai"></el-option>
                <el-option label="青岛市" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司">
              <el-select v-model="formInline.company" placeholder="公司">
                <el-option label="青岛前湾联合有限公司" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button style="color: #009bfe">查询</el-button>
            </el-form-item>
          </el-form>
        </el-container>
      </el-header>

      <el-footer style="height: 80%;width: 100%;border: 1px solid #3b7cbd; box-shadow: 0 2px 12px 0 #f6f6f6">
        <el-container style="margin-left:-20px;height: 100%;width: 100%">
          <el-table :data="tableData" style="width: 100%;height: 100%" :row-style="getRowClass"
                    :header-cell-style="{background:'#101E44',color:'#606266'}" :fit="true">
            <el-table-column
              prop="one"
              label="序列"
              width="180">
            </el-table-column>
            <el-table-column
              prop="two"
              label="编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="three"
              label="工作时间">
            </el-table-column>
            <el-table-column
              prop="four"
              label="工作循环">
            </el-table-column>
            <el-table-column
              prop="five"
              label="运行监控">
            </el-table-column>
            <el-table-column
              prop="six"
              label="状态检测">
            </el-table-column>
            <el-table-column
              prop="seven"
              label="日常自检">
            </el-table-column>
          </el-table>
        </el-container>
      </el-footer>

    </el-main>

    <!--下区域-->
    <el-footer style="height: 50%">
      <el-container style="width: 100%;height:100%" direction="horizontal">
        <el-aside style="width: 50%;height:100%">
          <el-container style="width: 100%;height:100%;border: 1px solid #16b8bd;box-shadow: 0 2px 12px 0 #f6f6f6" direction="vertical">
            <!--第一部分-->
            <el-row type="flex" :gutter="0" class="row-bg" justify="center" style="width: 100%;height: 50px">
              <el-col :span="10"><div style="color: #4AB7BD;font-size: 30px;margin-left: 20px;text-align: center">主钩</div></el-col>
              <el-col :span="10"><div style="color: #4AB7BD;font-size: 30px;margin-left: 20px;text-align: center">副钩</div></el-col>
            </el-row>

            <el-row type="flex" :gutter="0" class="row-bg" justify="center" style="width: 100%;height: 50px">
              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">吊重</div></el-col>
              <el-col :span="3"><el-input v-model="input1" placeholder="请输入内容" size="mini"></el-input></el-col>
              <el-col :span="1"><div style="color: #4AB7BD;font-size: 20px;margin-left: -10px;text-align: center;">吨</div></el-col>
              <el-col :span="1" style="margin-top: 5px"><el-switch v-model="valueT1" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>

              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center">吊高</div></el-col>
              <el-col :span="3"><el-input v-model="input2" placeholder="请输入内容" size="mini"></el-input></el-col>
              <el-col :span="1"><div style="color: #4AB7BD;font-size: 20px;margin-left: -10px;text-align: center;">米</div></el-col>

              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">吊重</div></el-col>
              <el-col :span="3"><el-input v-model="input3" placeholder="请输入内容" size="mini"></el-input></el-col>
              <el-col :span="1"><div style="color: #4AB7BD;font-size: 20px;margin-left: -10px;text-align: center;">吨</div></el-col>
              <el-col :span="1" style="margin-top: 5px"><el-switch v-model="valueT2" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>

              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center">吊高</div></el-col>
              <el-col :span="3"><el-input v-model="input4" placeholder="请输入内容" size="mini"></el-input></el-col>
              <el-col :span="1"><div style="color: #4AB7BD;font-size: 20px;margin-left: -10px;text-align: center;">米</div></el-col>
            </el-row>

            <el-row type="flex" :gutter="0" class="row-bg" justify="center" style="width: 100%;height: 50px">
              <el-col :span="3"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">上升限位</div></el-col>
              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">力矩</div></el-col>
              <el-col :span="3"><el-input v-model="input5" placeholder="请输入内容" size="mini"></el-input></el-col>
              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">吨/米</div></el-col>
              <el-col :span="3"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">下降限位</div></el-col>

              <el-col :span="3"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">上升限位</div></el-col>
              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">力矩</div></el-col>
              <el-col :span="3"><el-input v-model="input6" placeholder="请输入内容" size="mini"></el-input></el-col>
              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">吨/米</div></el-col>
              <el-col :span="3"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">下降限位</div></el-col>
            </el-row>

            <el-row type="flex" :gutter="0" class="row-bg" justify="center" style="width: 100%;height: 50px">
              <el-col :span="2"  :offset="1" style="margin-top: -20px"><el-switch v-model="valueT3" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">幅度</div></el-col>
              <el-col :span="3"><el-input v-model="input7" placeholder="请输入内容" size="mini"></el-input></el-col>
              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">米</div></el-col>
              <el-col :span="2"  :offset="1" style="margin-top: -20px"><el-switch v-model="valueT4" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>

              <el-col :span="2"  :offset="1" style="margin-top: -20px"><el-switch v-model="valueT5" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">幅度</div></el-col>
              <el-col :span="3"><el-input v-model="input8" placeholder="请输入内容" size="mini"></el-input></el-col>
              <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">米</div></el-col>
              <el-col :span="2"  :offset="1" style="margin-top: -20px"><el-switch v-model="valueT6" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
            </el-row>
            <!--空行-->
            <el-row type="flex" :gutter="0" class="row-bg" justify="center" style="width: 100%;height: 10px"></el-row>
            <!--第二部分-->
            <el-row type="flex" :gutter="0" class="row-bg" justify="center" style="width: 100%;height: 50px">
              <el-col :span="10"><div style="color: #4AB7BD;font-size: 30px;margin-left: 20px;text-align: center">大车行程</div></el-col>
              <el-col :span="10"><div style="color: #4AB7BD;font-size: 30px;margin-left: 20px;text-align: center">旋转机构</div></el-col>
              <el-col :span="10"><div style="color: #4AB7BD;font-size: 30px;margin-left: 20px;text-align: center">联杆机构</div></el-col>
            </el-row>

            <el-row type="flex" :gutter="0" class="row-bg" justify="start" style="width: 100%;height: 50px">
              <el-col :span="3"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">支腿行程</div></el-col>
              <el-col :span="3"><el-input v-model="input9" placeholder="请输入内容" size="mini"></el-input></el-col>
              <el-col :span="1"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">米</div></el-col>

              <el-col :span="2"  :offset="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">角度</div></el-col>
              <el-col :span="3"><el-input v-model="input10" placeholder="请输入内容" size="mini"></el-input></el-col>
              <el-col :span="1"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">度</div></el-col>

              <el-col :span="3"  :offset="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">主壁角度</div></el-col>
              <el-col :span="3"><el-input v-model="input11" placeholder="请输入内容" size="mini"></el-input></el-col>
              <el-col :span="1"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">度</div></el-col>
            </el-row>

            <el-row type="flex" :gutter="0" class="row-bg" justify="start" style="width: 100%;height: 50px">
              <el-col :span="3" ><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">左行限位</div></el-col>
              <el-col :span="3" ><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">右行限位</div></el-col>
              <el-col :span="4"   :offset="3"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">旋转机构锚定</div></el-col>
            </el-row>

            <el-row type="flex" :gutter="0" class="row-bg" justify="start" style="width: 100%;height: 20px">
              <el-col :span="1"  :offset="1" style="margin-top: -20px"><el-switch v-model="valueT7" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
              <el-col :span="1"  :offset="2" style="margin-top: -20px"><el-switch v-model="valueT8" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
              <el-col :span="1"  :offset="5" style="margin-top: -20px"><el-switch v-model="valueT9" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
            </el-row>
            <!--空行-->
            <el-row type="flex" :gutter="0" class="row-bg" justify="center" style="width: 100%;height: 10px"></el-row>

            <el-container style="width: 100%;height:30%" direction="horizontal">
              <el-container style="width: 30%;height:100%">
                <el-header style="width: 100%;height:30%">
                  <div style="color: #4AB7BD;font-size: 30px;margin-top: 10px;text-align: center;">监控状态</div>
                </el-header>

                <el-main style="width: 100%;height:70%">
                  <el-row type="flex" :gutter="0"  justify="start" style="width: 100%;height: 30px">
                    <el-col :span="5" ><el-button style="margin-left:-10px;margin-top: -20px" type="danger" icon="el-icon-warning-outline" size="mini" circle></el-button></el-col>
                    <el-col><div style="color: #4AB7BD;font-size: 20px;margin-left: -10px;">主起升制动</div></el-col>
                  </el-row>
                  <el-row type="flex" :gutter="0"  justify="start" style="width: 100%;height: 30px">
                    <el-col :span="5" ><el-button style="margin-left:-10px;margin-top: -10px" type="danger" icon="el-icon-warning-outline" size="mini" circle></el-button></el-col>
                    <el-col><div style="color: #4AB7BD;font-size: 20px;margin-left: -10px;">副起升制动</div></el-col>
                  </el-row>
                </el-main>
              </el-container>

              <el-container style="width: 70%;height:100%">
                <el-header style="width: 100%;height:30%">
                  <div style="color: #4AB7BD;font-size: 30px;margin-top: 10px;text-align: center;">操作指令</div>
                </el-header>
                <el-main>
                  <el-row type="flex" :gutter="0"  justify="center" style="width: 100%;height: 30px">
                    <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">启动</div></el-col>
                    <el-col :span="1"  ><el-switch v-model="valueT10" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
                    <el-col :span="4"  :offset="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">机上/机下</div></el-col>
                    <el-col :span="1"  ><el-switch v-model="valueT11" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
                    <el-col :span="2" :offset="3"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">旁路</div></el-col>
                    <el-col :span="1"  ><el-switch v-model="valueT12" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
                  </el-row>
                  <el-row type="flex" :gutter="0"  justify="center" style="width: 100%;height: 30px">
                    <el-col :span="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">停止</div></el-col>
                    <el-col :span="1"  ><el-switch v-model="valueT13" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
                    <el-col :span="4"  :offset="2"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">故障复位</div></el-col>
                    <el-col :span="1"  ><el-switch v-model="valueT14" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
                    <el-col :span="2" :offset="3"><div style="color: #4AB7BD;font-size: 20px;margin-left: 0px;text-align: center;">旋转制动</div></el-col>
                    <el-col :span="1"  ><el-switch v-model="valueT15" active-color="#ff4949" inactive-color="#13ce66"></el-switch></el-col>
                  </el-row>
                </el-main>
              </el-container>

            </el-container>


          </el-container>
        </el-aside>

        <el-aside style="width: 50%;height:100%">
          <el-row style="margin-left: 10px; margin-right: 20px; margin-top: 10px;border: 1px solid #16b8bd;box-shadow: 0 2px 12px 0 #f6f6f6">
            <strain></strain>
          </el-row>
          <el-row style="margin-left: 10px; margin-right: 20px; margin-top: 10px;border: 1px solid #16b8bd;box-shadow: 0 2px 12px 0 #f6f6f6">
            <vibration></vibration>
          </el-row>
        </el-aside>
      </el-container>
    </el-footer>

  </el-container>
</template>

<script>
  import PieChart from './components/PieChart'
  import LineChart from './components/LineChart'
  import vibration from './components/vibration'
  import strain from './components/strain'
  import echarts from 'echarts'
  import 'echarts/map/js/china'
  import Vue from 'vue'

  export default {
    name: 'User',
    components: {
      PieChart,
      LineChart,
      vibration,
      strain
    },
    data() {
      return {
        date: new Date(),
        valueT1: '',
        valueT2: '',
        valueT3: '',
        valueT4: '',
        valueT5: '',
        valueT6: '',
        valueT7: '',
        valueT8: '',
        valueT9: '',
        valueT10: '',
        valueT11: '',
        valueT12: '',
        valueT13: '',
        valueT14: '',
        valueT15: '',
        value9: '',
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        input7: '',
        input8: '',
        input9: '',
        input10: '',
        input11: '',

        formInline: {
          region: '',
          company: '',
          area: ''
        },
        tableData: [{
          one: '1',
          two: 'KQ13063',
          three: '桥式',
          four: '356',
          five: '1025',
          six: '正常',
          seven: '正常'
        }, {
          one: '2',
          two: 'KQ13063',
          three: '桥式',
          four: '356',
          five: '1025',
          six: '正常',
          seven: '正常'
        }, {
          one: '3',
          two: 'KQ13063',
          three: '桥式',
          four: '356',
          five: '1025',
          six: '正常',
          seven: '正常'
        }, {
          one: '4',
          two: 'KQ13063',
          three: '桥式',
          four: '356',
          five: '1025',
          six: '正常',
          seven: '正常'
        }, {
          one: '5',
          two: 'KQ13063',
          three: '桥式',
          four: '356',
          five: '1025',
          six: '正常',
          seven: '正常'
        }, {
          one: '6',
          two: 'KQ13063',
          three: '桥式',
          four: '356',
          five: '1025',
          six: '正常',
          seven: '正常'
        }, {
          one: '7',
          two: 'KQ13063',
          three: '桥式',
          four: '356',
          five: '1025',
          six: '正常',
          seven: '正常'
        }]
      }
    },
    methods: {
      dateFormat(time) {
        var date = new Date(time)
        var year=date.getFullYear()
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1
        var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate()
        var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours()
        var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes()
        var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds()
        // 拼接
        return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
      },
      tableRowStyle({ row, rowIndex }) {
        return 'background-color: #6bb0f6;color: #72C22D'
      },
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color: #6bb0f6;color:  #72C22D;font-weight: 500;'
        }
      },
      getRowClass({ row, column, rowIndex, columnIndex }) {
        return 'background:#06134A;color:#72C22D;'
      },
      getTableDataFormSon(data) {
        const tableDataTemp = data
        this.tableData = []
        for (let j = 9; j >= 0; j--) {
          const tableDataI = {}
          for (let i = 0; i < this.measurePoints.length; i++) {
            const point = this.measurePoints[i]
            const values = tableDataTemp.get(point)
            const date = new Date(values[j].name)
            if (i <= 0) {
              tableDataI['time'] = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
            }
            tableDataI[point + 'value'] = values[j].value
          }
          this.tableData.push(tableDataI)
        }
        this.currTableData = []
        for (let i = 0; i < this.measurePoints.length; i++) {
          const point = this.measurePoints[i]
          const values = tableDataTemp.get(point)
          const date = new Date(values[values.length - 1].name)
          this.currTableData.push({
            point: point,
            data: values[values.length - 1].value,
            time: date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
          })
        }
      }
    },
    mounted() {
      let _this = this //声明一个变量指向vue实例this,保证作用域一致
      this.timer = setInterval(function() {
        _this.date = new Date()//修改数据date
      }, 1000)
      consol.log(date)
    }
  }
</script>

<style scoped>
  .headerbackgroud{
    background-image: url("../../../../assets/screen-header.jpg");
  }
  .row-bg {
    padding: 10px 0;
  }
</style>
